<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<up-icon name="arrow-leftward" color="#666" size="20" @click="goToBack"></up-icon>
		</template>
	</up-navbar>

	<view class="login">
		<view :style="{
			padding: `${bottom + 20}px 30px`,
		}">
			<view class="u-flex u-flex-column u-flex-items-center">
				<view class="_logo">
					<up-image src="/static/logo.png" width="128rpx" height="128rpx"></up-image>
				</view>
				<view class="u-m-t-40">
					<image src="@/static/images/index_title.png" style="width: auto;height: 24px;" mode="heightFix">
					</image>
				</view>
				<!-- <view class="f-s-16 f-w-b u-m-t-24">欢迎登录尧君智库</view> -->
			</view>

			<view class="form-box">
				<u--form :model="loginForm" ref="uForm" errorType="toast" :labelWidth="0">
					<u-form-item prop="account">
						<up-input prefixIcon="account" prefixIconStyle="font-size: 24px;margin-left: 10px;"
							placeholder="请输入手机号码" type="number" :maxlength="11" v-model="loginForm.account"
							:customStyle="{
								    border: '1px solid #E4E4E4',
			                        padding: '24rpx',
			                        borderRadius: '12px',
			                        fontSize: '32rpx',
									background: 'rgba(8,15,7,.02)'
			                    }"></up-input>
					</u-form-item>
					<u-form-item prop="pwd">
						<u-input prefixIcon="lock" prefixIconStyle="font-size: 24px;margin-left: 10px;" type="password"
							v-model="loginForm.pwd" placeholder="请输入密码" :customStyle="{
										borderBottom: '1px solid #E4E4E4',
										padding: '24rpx',
										borderRadius: '12px',
			                            fontSize: '32rpx',
										background: 'rgba(8,15,7,.02)'
			                        }"></u-input>
					</u-form-item>
					<u-form-item>
						<view class="u-flex u-flex-items-center">
							<u-checkbox-group v-model="agree">
								<u-checkbox shape="circle" activeColor="#2080F7" :size="14" name="agree">
								</u-checkbox>
							</u-checkbox-group>
							<view class="f-s-12"><text class="u-light-color">我已阅读并同意</text><text class="term"
									@click="toWeb(3)">《服务条款》</text></view>
						</view>
					</u-form-item>
				</u--form>

				<view class="u-m-t-60">
					<u-button color="#2080F7" text="立即登录" :customStyle="{
						width: '100%',
						height: '96rpx',
						borderRadius: '12px',
						fontSize: '32rpx',
						fontWeight: 'bold'
					}" @click="login"></u-button>
				</view>
				<view class="u-m-t-40 u-flex u-flex-center f-s-12">
					<!-- <u-icon name="home" color="#999" label="游客模式" :size="16" :label-size="14"
						label-color="#999"></u-icon> -->
					<text class="u-light-color">还没有账号？点这里<text style="color: #2080F7;" class="u-p-l-8 " @click="toSign">注册<text
								class="iconfont f-s-12 u-m-l-6 u-p-r-8">&#xe601;</text></text>吧</text>
				</view>

			</view>
		</view>



		<!-- <view class="login-btn">
			<u-button type="primary" shape="circle" openType="getPhoneNumber" @getphonenumber="authLogin"
				color="linear-gradient(to right, #4D8CFF,#8BB4FF)" :customStyle="{
					width: '220px'
				}" text="授权手机进行注册或登录"></u-button>
			<view class="u-m-t-40 u-flex u-flex-center" @click="goIndex">
				<u-icon name="home" color="#999" label="游客模式" :size="16" :label-size="14" label-color="#999"></u-icon>
			</view>
		</view> -->
		<!-- <view class="bottom-img"></view> -->
	</view>

	<view class="wechat-login">
		<view class="u-light-color f-s-12">- 社交账号一键登录并注册 -</view>
		
		<block v-if="agree.length === 0">
			<button class="phone-login u-m-t-32" @click="noAgree">
				<image src="@/static/icon/wechat-icon.png" mode="widthFix"></image>
			</button>
		</block>
		<button v-else class="phone-login u-m-t-32" openType="getPhoneNumber" @getphonenumber="authLogin">
			<image src="@/static/icon/wechat-icon.png" mode="widthFix"></image>
		</button>
		
		
	</view>
</template>

<script setup>
	import {
		getToken
	} from '@/utils/auth'
	import {
		auth
	} from '@/api/auth.js'
	import {
		toast
	} from '@/utils/common';
	import store from '@/store';

	import {
		ref
	} from 'vue'
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const loginForm = ref({
		account: '',
		pwd: ''
	})
	const agree = ref([])

	/**
	 * 授权手机号
	 */
	const authLogin = (e) => {
		if (agree.value.length == 0) {
			toast('请同意并阅读服务条款')
			return
		}
		// 允许
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			store.dispatch('AuthLogin', e.detail.code).then(() => {
				loginSuccess()
			}).catch((err) => {
				console.info(err)
				toast("手机号授权登录失败")
			})
			return
		}
		toast("已拒绝手机号授权")
	}
	
	const noAgree = () => {
		toast('请同意并阅读服务条款')
	}
	
	function toSign() {
		uni.navigateTo({
			url: '/pages/sign'
		})
	}

	// 登录成功后，处理函数
	function loginSuccess() {
		const prev = getCurrentPages()[0].route
		// 设置用户信息
		store.dispatch('GetInfo').then(res => {
			toast("登录成功")
			if (prev == 'pages/authLogin') {
				uni.switchTab({
					url: '/pages/mine'
				})
				return
			}
			uni.navigateBack()
		})
	}

	function toWeb(id) {
		uni.navigateTo({
			url: '/subPackages/about/about?id=' + id
		})
	}


	const login = () => {
		if (agree.value.length == 0) {
			uni.$u.toast('请同意并阅读服务条款')
			return
		}
		// this.$refs.uForm.validate().then(res => {
		pwdLogin();
		// })
	}

	// 密码登录
	function pwdLogin() {
		store.dispatch('Login', loginForm.value).then(() => {
			loginSuccess()
		})
	};

	/**
	 * 去首页
	 */
	function goIndex() {
		uni.switchTab({
			url: '/pages/index'
		})
	}

	const goToBack = () => {
		const prevRoute = getCurrentPages()[0].route
		if (prevRoute && prevRoute == 'pages/authLogin') {
			uni.switchTab({
				url: '/pages/index'
			})
			return
		}
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;
		width: 100vw;
		background-image: url('https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/03/22/png/b234ec3380009f35a7_20240322093243A007.png');
		background-repeat: no-repeat;
		background-size: cover;

		._logo {
			width: 128rpx;
			height: 128rpx;
			border: 6rpx solid #fff;
			border-radius: 50%;
			margin: 0 auto;
		}


		.login-btn {
			padding: 80px 40px;
			text-align: center;
		}

		.bottom-img {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 280px;
			background-repeat: no-repeat;
			background-size: 100%;
			background-image: url(https://gm-imgs.wq-info.com/2023/06/08/login-btm_20230608111027A002.png)
		}
	}

	.form-box {
		margin-top: 68px;
	}

	.wechat-login {
		position: fixed;
		bottom: 60px;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-flow: column;
		align-items: center;

		.phone-login {
			background-color: transparent !important;
		}

		image {
			width: 50px;
			height: 50px;
		}

		.term {
			color: #2080f7 !important;
		}
	}


	::v-deep .input-placeholder {
		// color: #c0c4cc !important;
	}
</style>